<template>
	<view class="line-detail-wrap full box bg-primary relative flex column">
		<view class="relative flex-1 box w-100">
			<view class="absolute inset">
				<scroll-view class="full" scroll-y>
					<view class="images-wrapper">
						<swiper class="full" circular :current="current" autoplay @change="swiperChange">
							<swiper-item class="full" v-for="(item,index) in imageList" :key="index">
								<view class="slide-show-item" @click="previewHandle(item)">
									<image :src="item.image" class="slide-image-item" mode="aspectFill"></image>
									<view class="play-btn" v-if="item.type === 1">
										<image :src="sourceUrl + '/kaishi1.png'" mode="aspectFill" class="begin-icon">
										</image>
									</view>
								</view>
							</swiper-item>
						</swiper>
						<view class="swiper-count">
							<image src="../static/icon/photo-icon.png" mode="aspectFill" class="count-icon"></image>
							<image src="../static/icon/video-icon.png" mode="aspectFill" class="count-icon"></image>
							<text class="count-value">{{ current + 1 }}/{{ imageList.length }}</text>
						</view>
					</view>
					<view class="content-desc-wrap">
						<view class="line-item-wrap">
							<view class="price-header">
								<view class="price-inner">
									<view class="price-value">
										<text class="prefix">￥</text>
										<text class="value-num">{{ totalPrice }}</text>
									</view>
									<!-- <view class="label-prefix">
										<text>起/人</text>
									</view> -->
								</view>
								<view class="people-num">
									<!-- <text>近期9人出游</text> -->
								</view>
							</view>
							<view class="line-name-wrap">
								<view class="line-tag">
									<text class="small-text">独享</text>
								</view>
								<view class="name-text">
									<text>{{ lineName }}</text>
								</view>
							</view>
							<view class="line-desc-text">
								<text>{{ desc }}</text>
							</view>
						</view>
						<!-- <view class="line-item-wrap">
							<view class="common-header">
								<text>出发日期</text>
							</view>
							<scroll-view class="w-100" scroll-x>
								<view class="date-list-wrap">
									<view class="date-item">
										<text class="week-text">星期一</text>
										<text class="date-value">08-10</text>
										<text class="date-money">￥8888</text>
									</view>
									<view class="more-date-item">
										<text class="more-text">更多日期</text>
										<image src="../static/icon/chevron-right-more.png" mode="aspectFill"
											class="more-icon"></image>
									</view>
								</view>
							</scroll-view>
						</view> -->
						<view class="line-item-wrap" v-for="(hotel) in hotelData" :key="hotel.id">
							<view class="common-header">
								<text>选择房型</text>
								<view class="active-hotel">
									<text>{{ hotel.name }}</text>
								</view>
							</view>
							<view class="room-type-list">
								<view class="room-type-item" v-for="(item,index) in hotel.typeList" :key="index"
									:class="{active: item.active}" @click="changeTypeHandle(item)">
									<view class="room-type-text">
										<text>{{ item.name }}</text>
									</view>
								</view>
							</view>
							<view class="room-empty-wrap" v-if="!hotel.typeList.length">
								<text>暂无房型信息</text>
							</view>
						</view>
						<view class="line-item-wrap">
							<view class="ritch-content">
								<u-parse :content="content" />
							</view>
						</view>
						<view class="content-tab-wrap">
							<view class="tab-item" v-for="(item,index) in tabList" :class="{active:activeTab === index}"
								:key="index" @click="changeTab(index)">
								<text>{{ item.label }}</text>
							</view>
						</view>
						<route-vue v-if="activeTab === 0" :countData="countData" :spotData="spotData" />
						<shop-desc v-if="activeTab === 1" :list="hotelRemarkList" />
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="footer-wrapper p-safe box relative">
			<view class="footer-inner">
				<view class="action-item" @click="closeHandle(true)">
					<u-icon size="24" name="kefu-ermai" color="#1D2129" />
					<text class="action-text">客服</text>
				</view>
				<view class="action-item margin" @click="collectHandle">
					<u-icon size="24" :name="isCollect ? 'star-fill' : 'star'"
						:color=" isCollect ? '#3E94EC' : '#1D2129'" />
					<text class="action-text">收藏</text>
				</view>
				<view class="btn-wrap">
					<u-button type="primary" text="立即预定" @click="confirmHandle" />
				</view>
			</view>
		</view>
		<view class="absolute">
			<u-loading-page :loading="loading" />
			<confirm-popup ref="confirmRef" :hotel="hotelOption" @success="onSuccess" @close="closePopup"
				:show="visible" />
			<video-preview :visible="showPopup" :source="videoSource" @close="closePreview" />
			<service-vue :show="showService" @close="closeHandle(false)" />
		</view>
	</view>
</template>

<script>
	import RouteVue from './com/route-vue.vue'
	import ShopDesc from './com/shop-desc.vue'
	import ConfirmPopup from './com/confirm-popup.vue'
	import VideoPreview from './com/video-preview.vue'
	import ServiceVue from '@/pages/user/com/service.vue'
	export default {
		onShareTimeline() {
			const { lineName, coverImage: image, id, } = this
			return {
				title: lineName,
				imageUrl: image,
				query: `id=${id}`
			}
		},
		onShareAppMessage() {
			const { lineName, id, coverImage: image } = this
			return {
				title: lineName,
				path: '/pages-bundle/line-detail/line-detail?id=' + id,
				imageUrl: image
			}
		},
		components: { RouteVue, ShopDesc, ConfirmPopup, VideoPreview, ServiceVue },
		onLoad(ev) {
			this.openWxShare()
			if (!ev.hasOwnProperty('id')) {
				return this.$toast({ title: '参数错误!' }, () => {
					uni.navigateBack()
				})
			}
			const { id } = ev
			this.initData(id)
			this.id = id
			if (ev.hasOwnProperty('event')) {
				this.event = !!(ev.event * 1)
			}
		},
		methods: {
			closeHandle(v) {
				this.showService = v
			},
			async collectHandle() {
				const { isCollect, id } = this
				const url = isCollect ? '/ProductLine/cancelCollect' : '/ProductLine/addCollect'
				const resp = await this.$request({
					url,
					data: { id },
				})
				const { code, msg } = resp
				const title = code !== 1 ? msg : isCollect ? '取消成功' : '收藏成功'
				this.$toast({ title })
				if (code !== 1) return
				this.isCollect = !isCollect
				if (this.event) {
					uni.$emit('collectChange', { type: 0 })
				}
			},
			closePreview(v) {
				this.showPopup = v
			},
			previewHandle(item) {
				if (item.type === 1) {
					// this.videoSource = item.video
					// this.showPopup = true
					uni.navigateTo({
						url: `/pages-bundle/video-preview/video-preview?url=${encodeURIComponent(item.video)}`
					})
					return
				}
				const urls = this.imageList.filter(item => item.type === 0).map(item => item.image)
				uni.previewImage({
					urls,
					current: item.image,
					indicator: 'number',
					longPressActions: true,
				})
			},
			swiperChange(ev) {
				const { current } = ev.detail
				this.current = current
			},
			generateSlideshow(list) {
				this.imageList = list.map(item => {
					const { cover, image_video, type } = item
					return { type: type * 1, image: cover, video: image_video }
				})
			},
			dispatchSpotData(data) {
				if (!data || !data.length) return
				const result = {}
				const len = data.length
				for (let i = 0; i < len; i++) {
					const item = data[i]
					const dayId = item.day
					if (!result.hasOwnProperty(dayId)) result[dayId] = []
					const { line_name, day, value } = item
					result[dayId].push({ name: line_name, day, timeList: value || [] })
				}
				console.log(result, 'result');
				this.spotData = result
				return;
				this.spotData = data.map(item => {

				})
			},
			changeTypeHandle(ev) {
				const { pid, typeId, active } = ev
				const targetHotel = this.hotelData.find(item => item.id === pid)
				if (!targetHotel) return
				// if (active && targetHotel.typeList.filter(item => item.active).length === 1) {
				// 	return this.$toast({ title: "至少选择一个房型" })
				// }
				const targetType = targetHotel.typeList.find(item => item.typeId === typeId)
				if (!targetType) return
				targetType.active = !active
			},
			chooseHotelChange(ev) {
				const { value } = ev.detail
				const target = this.hotelData[value]
				this.activeHotelId = target.id
			},
			initHotel(list) {
				if (!list || !list.length) return
				const result = list.map(item => {
					const { hotel_rel, day } = item
					const { id, hotelType, content, hotel_name } = hotel_rel
					let activeType = ''
					const typeList = hotelType.map((typeItem, typeIndex) => {
						const { name, number, price, id: typeId } = typeItem
						if (typeIndex === 0) activeType = typeId
						return { name, number, price, typeId, pid: id, active: typeIndex === 0 }
					}) || []
					return { id, content, day, typeList, name: hotel_name, activeType }
				})
				this.hotelData = result
				// const [activeHotel] = result
				// this.activeHotelId = activeHotel.id
			},
			async initData(id) {
				this.loading = true
				const resp = await this.$request({
					url: "/ProductLine/getLineDetails",
					data: { id },
				})
				await this.$delay(300)
				const { code, data, msg } = resp
				if (code !== 1) return this.$toast({ title: msg }, () => {
					uni.navigateBack()
				})
				this.loading = false
				const {
					money,
					line_name: lineName,
					introductory: desc,
					hotel,
					is_collect: isCollect,
					content,
					spot_num: spotNum,
					activity_num: activityNum,
					catering_num: cateringNum,
					cost_num: costNum,
					shop_num: shopNum,
					spot,
					slideshow,
					start_time,
					coupon,
					cover_image,
				} = data
				this.coverImage = cover_image
				this.money = money
				this.lineName = lineName
				this.desc = desc
				this.isCollect = isCollect
				this.content = content
				this.initHotel(hotel)
				this.spotNum = spotNum
				this.activityNum = activityNum
				this.cateringNum = cateringNum
				this.costNum = costNum
				this.shopNum = shopNum
				this.startDate = start_time
				this.coupon = coupon
				this.dispatchSpotData(spot || [])
				this.generateSlideshow(slideshow)
			},
			getHotelOption() {
				console.log(this.hotelData, 'hotelData');
				const result = []
				const maxLen = this.hotelData.length
				for (let i = 0; i < maxLen; i++) {
					const item = this.hotelData[i]
					if (!item.typeList || !item.typeList.length) return this.$toast({ title: '未设置房型' })
					const { name: hotelName, id } = item
					let isAdd = false
					item.typeList.forEach(typeItem => {
						if (!typeItem.active) return
						const { name, typeId, number, price } = typeItem
						isAdd = true
						result.push({
							pid: id,
							hotelName,
							typeName: name,
							typeId,
							value: 1,
							id: typeId,
							price,
						})
					})
					if (!isAdd) return this.$toast({ title: '请选择房型' })
				}
				return result
			},
			confirmHandle() {
				const opt = this.getHotelOption()
				if (!opt) return
				this.$refs.confirmRef?.initOption(opt, () => {
					this.visible = true
				})
			},
			calcHotelPrice(list) {
				const roomResult = []
				let roomNumTotal = 0,
					total = 0;
				list.forEach(item => {
					const { pid, hotelName } = item
					const parent = roomResult.find(p => p.id === pid)
					roomNumTotal += item.value
					total += (item.total * 1)
					if (!parent) return roomResult.push({ id: pid, hotelName, children: [item] })
					parent.children.push(item)
				})
				return {
					data: roomResult,
					total,
					roomNumTotal
				}
			},
			async onSuccess({ roomData, numData }) {
				uni.showLoading({
					title: '正在提交',
					mask: true,
				})
				const roomResult = this.calcHotelPrice(roomData)
				const { data: roomList, total: roomTotal, roomNumTotal } = roomResult
				const { money, startDate, id, lineName, coupon, coverImage } = this
				this.$store.commit('setOrderData', {
					title: lineName,
					lineId: id,
					orderPrice: money,
					roomList,
					roomTotal,
					startTime: startDate,
					...numData,
					roomNumTotal,
					coupon: coupon || [],
					coverImage,
					rowRoomData: roomData
				})
				await this.$delay(200)
				uni.navigateTo({
					url: '/pages-bundle/confirm-order/confirm-order'
				})
				uni.hideLoading()
			},
			closePopup() {
				this.visible = false
			},
			changeTab(index) {
				if (this.activeTab !== index) {
					this.activeTab = index
				}
			}
		},
		computed: {
			hotelOption() {
				return this.hotelData.map(item => {
					const { id, name } = item
					return { id, name }
				})
			},
			totalPrice() {
				return this.money * 1
			},
			roomPriceTotal() {
				return this.hotelData.reduce((pre, cur) => {
					const { activeType, typeList, day } = cur
					if (!typeList.length) return pre + 0
					const target = typeList.find(item => item.typeId === activeType)
					if (!target) return pre + 0
					return pre + (target.price * day)
				}, 0)
			},
			activeHotelRemark() {
				return this.activeHotel.content
			},
			hotelRemarkList() {
				return this.hotelData.map(item => {
					const { name, content } = item
					return { name, content }
				})
			},
			countData() {
				const { spotNum, activityNum, cateringNum, costNum, shopNum } = this
				return [{
						label: '景区游玩',
						value: spotNum
					},
					{
						label: '户外活动',
						value: activityNum
					},
					{
						label: '饮品小吃',
						value: cateringNum
					},
					{
						label: '特色体验',
						value: costNum
					},
					{
						label: '民宿酒店',
						value: shopNum
					}
				]
			},
			activeHotel() {
				const { hotelData, activeHotelId } = this
				const defaultHotel = { name: '酒店', typeList: [], activeType: '', content: '', }
				if (!hotelData.length) return defaultHotel
				const target = hotelData.find(item => item.id === activeHotelId)
				if (!target) return defaultHotel
				return target
			},
			tabList() {
				return [{
					value: 0,
					label: '行程安排'
				}, {
					value: 1,
					label: '酒店介绍'
				}]
			}
		},
		data() {
			return {
				id: '',
				showService: false,
				showPopup: false,
				videoSource: '',
				loading: true,
				current: 0,
				activeTab: 0,
				visible: false,
				lineName: '',
				desc: '',
				money: '',
				isCollect: false,
				hotelData: [],
				activeHotelId: '',
				content: '',
				spotNum: 0,
				activityNum: 0,
				cateringNum: 0,
				costNum: 0,
				shopNum: 0,
				spotData: [],
				imageList: [],
				event: false, // 是否是从收藏过来的
				startDate: '',
			}
		}
	}
</script>

<style lang="scss" scoped>
	.line-detail-wrap {
		.content-desc-wrap {
			padding: 36rpx 32rpx 0;
			box-sizing: border-box;
			position: relative;

			.content-tab-wrap {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 36rpx;
				padding: 36rpx 0 24rpx;
				box-sizing: border-box;

				.tab-item {
					height: 40rpx;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.6);
					line-height: 40rpx;
					transition: all cubic-bezier(0.075, 0.82, 0.165, 1) .2s;

					&.active {
						font-size: 28rpx;
						font-weight: bold;
						color: rgba(0, 0, 0, 0.9);
					}
				}
			}

			.line-item-wrap {
				padding: 24rpx;
				box-sizing: border-box;
				position: relative;
				background-color: #ffffff;
				border-radius: 16rpx;
				margin-bottom: 36rpx;

				.ritch-content {
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.6);
					line-height: 40rpx;
					word-break: break-all;
				}

				.line-item-text {
					margin: 16rpx 0 32rpx;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.6);
					line-height: 40rpx;
				}

				.common-header {
					height: 44rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.9);
					line-height: 44rpx;
					display: flex;
					align-items: center;

					.active-hotel {
						margin-left: auto;
					}
				}

				.room-type-list {
					display: flex;
					flex-flow: row wrap;
					margin-top: 24rpx;
					box-sizing: border-box;
					position: relative;
					gap: 24rpx 12rpx;

					.room-empty-wrap {
						font-size: 28rpx;
						color: rgb(192, 196, 204);
					}

					.room-type-item {
						padding: 12rpx 32rpx;
						box-sizing: border-box;
						position: relative;
						background: #F1F1F1;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						--text-color: rgba(0, 0, 0, 0.9);
						transition: all cubic-bezier(0.215, 0.610, 0.355, 1) .2s;

						&.active {
							background: #3E94EC;
							box-shadow: 0rpx 10rpx 28rpx 0rpx rgba(20, 121, 225, 0.2);
							--text-color: #FFFFFF;
						}

						.room-type-text {
							height: 32rpx;
							font-size: 28rpx;
							color: var(--text-color);
							line-height: 32rpx;
						}
					}
				}

				.date-list-wrap {
					display: flex;
					flex-flow: row nowrap;
					margin-top: 24rpx;

					.more-date-item {
						width: 104rpx;
						height: 136rpx;
						background: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.more-text {
							width: 50rpx;
							font-size: 20rpx;
							color: rgba(0, 0, 0, 0.6);
							word-break: break-all;
							line-height: 34rpx;
						}

						.more-icon {
							width: 32rpx;
							height: 32rpx;
						}
					}

					.date-item {
						width: 124rpx;
						height: 136rpx;
						display: flex;
						flex-flow: column;
						align-items: center;
						justify-content: center;
						background: #3E94EC;
						box-shadow: 0rpx 10rpx 28rpx 0rpx rgba(20, 121, 225, 0.2);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						margin-right: 16rpx;

						.date-money {
							height: 40rpx;
							font-size: 16rpx;
							font-weight: bold;
							color: #FFFFFF;
							line-height: 40rpx;
						}

						.date-value {
							height: 32rpx;
							font-size: 26rpx;
							color: #FFFFFF;
							line-height: 32rpx;
							margin-top: 8rpx;
						}

						.week-text {
							height: 32rpx;
							font-size: 28rpx;
							color: #FFFFFF;
							line-height: 32rpx;
						}
					}
				}

				&:last-child {
					margin-bottom: 0;
				}

				.line-desc-text {
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.6);
					line-height: 40rpx;
					margin-top: 16rpx;
				}

				.line-name-wrap {
					display: flex;
					align-items: center;
					margin-top: 24rpx;

					.name-text {
						height: 44rpx;
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.9);
						font-weight: bold;
						line-height: 44rpx;
						margin-left: 8rpx;
						word-break: break-all;
					}

					.line-tag {
						background: linear-gradient(135deg, #8BDCFF 0%, #E4FF68 100%);
						border-radius: 8rpx;
						padding: 6rpx 16rpx;
						box-sizing: border-box;
						font-size: 16rpx;
						color: rgba(0, 0, 0, 0.9);
						display: flex;
						align-items: center;
						justify-content: center;

						.small-text {
							transform: scale(.9);
							transform-origin: center center;
						}
					}
				}

				.price-header {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.people-num {
						height: 40rpx;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.6);
						line-height: 40rpx;
					}

					.price-inner {
						display: flex;
						align-items: flex-end;

						.label-prefix {
							height: 40rpx;
							font-size: 24rpx;
							color: rgba(0, 0, 0, 0.6);
							line-height: 40rpx;
							margin-left: 4rpx;
						}

						.price-value {
							display: flex;
							align-items: flex-end;
							color: #FF7433;

							.value-num {
								font-size: 40rpx;
								font-weight: bold;
							}

							.prefix {
								font-size: 28rpx;
								padding-bottom: 2rpx;
							}
						}
					}
				}


			}
		}

		.footer-wrapper {
			background-color: #ffffff;

			.footer-inner {
				display: flex;
				align-items: center;
				padding: 24rpx 32rpx;
				box-sizing: border-box;

				.btn-wrap {
					flex: 1;

					::v-deep button {
						height: 76rpx;
						background: linear-gradient(135deg, #8BDCFF 0%, #E4FF68 100%);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						border: 0;
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.9);
					}
				}

				.action-item {
					display: flex;
					flex-flow: column;
					align-items: center;

					&.margin {
						margin: 0 64rpx 0 48rpx;
					}

					.action-text {
						height: 40rpx;
						font-size: 24rpx;
						color: #1D2129;
						line-height: 40rpx;
					}
				}
			}
		}

		.images-wrapper {
			width: 100%;
			height: 618rpx;
			position: relative;
			box-sizing: border-box;

			.slide-show-item {
				height: 100%;
				position: relative;

				.play-btn {
					width: 90rpx;
					height: 90rpx;
					background: rgba(29, 33, 41, 0.6);
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					border-radius: 50%;
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: center;

					.begin-icon {
						width: 50rpx;
						height: 42rpx;
					}
				}

				.slide-image-item {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					right: 0;
				}
			}

			.swiper-count {
				padding: 8rpx 16rpx;
				box-sizing: border-box;
				position: absolute;
				bottom: 36rpx;
				right: 24rpx;
				background: rgba(0, 0, 0, 0.4);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				display: flex;
				align-items: center;

				.count-value {
					font-size: 24rpx;
					font-weight: bold;
					color: #FFFFFF;
				}

				.count-icon {
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
				}
			}

		}
	}
</style>